<template>
  <div>
    <div class="f-r a-c j-b" style="margin-bottom: 20px">
      <div class="f-r a-c">
        <div>选择工序</div>
        <div style="font-size: 12px;color: #999999;margin-left: 24px">制定种植流程时，请按照实际生产中工序执行的先后顺序进行排序</div>
      </div>
      <el-button type="primary" plain icon="el-icon-plus" @click="onAdd">选择工序</el-button>
    </div>
    <div class="table-box">
      <el-table
        v-loading="loading"
        :height="300"
        stripe
        :data="tableData"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column type="index" align="center" label="序号" />
        <el-table-column prop="teamName" label="选用工序" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" clearable />
          </template>
        </el-table-column>
        <el-table-column prop="teamName" label="选用工序" align="center" width="220px">
          <template slot-scope="scope">
            <div>
              <div class="f-r a-c" style="margin-bottom: 10px">
                <span>开始</span>
                <el-date-picker
                  v-model="scope.row.startTime"
                  style="width: 140px;margin-left: 10px"
                  type="date"
                  placeholder="选择日期"
                />
              </div>
              <div class="f-r a-c">
                <span>结束</span>
                <el-date-picker
                  v-model="scope.row.endTime"
                  style="width: 140px;margin-left: 10px"
                  type="date"
                  placeholder="选择日期"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="teamName" label="参考执行标准" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" clearable type="textarea" :rows="3" />
          </template>
        </el-table-column>
        <el-table-column prop="teamName" label="资源名称" align="center">
          <template slot-scope="scope">
            <div style="color: #52AF58">
              <i class="el-icon-circle-plus" />
              添加资源
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="cropName" label="效率值" align="center" />
        <el-table-column prop="processNum" label="单价" align="center" />
        <el-table-column prop="processNum" label="用量" align="center" />
        <el-table-column prop="teamName" label="生育期" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" clearable />
          </template>
        </el-table-column>
        <el-table-column prop="teamName" label="生育期" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" clearable type="textarea" :rows="3" />
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="80px">
          <template slot-scope="scope">
            <el-button
              type="text"
            >复制工序
            </el-button>
            <el-button
              style="margin-left: 0"
              type="text"
            >删除工序</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      title="选择工序"
      :visible.sync="dialogVisible"
      append-to-body
      width="1000px"
    >
      <ProcessPage @checked="onCheckedProcess" />
    </el-dialog>
  </div>
</template>

<script>
import crud from '@/mixins/crud';
import { http_plant_process } from '@/api';
import ProcessPage from './process-page'
export default {
  name: 'Item',
  components: {
    ProcessPage
  },
  mixins: [crud],
  data() {
    return {
      request: http_plant_process,
      dialogVisible: false,
      tableData: [
      ]
    }
  },
  methods: {
    initData(teamId) {
      this.teamId = teamId
      if (!teamId) {
        this.tableData = []
        return
      }
      this.loading = true
      http_plant_process.page({
        ...this.getQueryParams(),
        teamId
      }).then(res => {
        this.tableData = res.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    onAdd() {
      this.dialogVisible = true
    },
    onCheckedProcess(item) {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
</style>
